<!--事件处置-->
<template>
    <div v-loading="loading" element-loading-text="拼命加载中">

        <div class="search-wrapper">
            <ul class="search-box">
                <li><span class="filter-name">事件类型：</span>
                    <el-select v-model="listQuery.typeId" placeholder="请选择" clearable style="width:130px" class="filter-item">
                        <el-option v-for="(item,index) in Options" :key="index" :label="item.typeName" :value="item.typeId"/><!--联表-->
                    </el-select></li>
                <li><span class="filter-name">事件来源：</span>
                    <el-select v-model="listQuery.eSource" placeholder="请选择" clearable style="width:150px" class="filter-item">
                        <el-option v-for="(item,index) in  eSourceOption" :key="index" :label="item.dictName" :value="item.dictValue"/><!--用的字典-->
                    </el-select></li>
                <li><span class="filter-name">所属河道：</span><!--以后可能要另外一个表查询 里写函数，-->
                    <el-select v-model="listQuery.riverId" placeholder="请选择" clearable style="width:150px" class="filter-item"><!--联表-->
                        <el-option v-for="(item,index) in Options" :key="index" :label="item.riverName" :value="item.riverId"/>
                    </el-select></li>
                <li><span class="filter-name">河长：</span>
                    <el-select v-model="listQuery.riverManage" placeholder="请选择" clearable style="width:130px" class="filter-item">
                        <el-option v-for="(item,index) in  Options" :key="index" :label="item.riverManage" :value="item.riverManage"/>
                    </el-select></li>
                <li><span class="filter-name">状态：</span>
                    <el-select v-model="listQuery.handleState" placeholder="请选择" clearable style="width:150px" class="filter-item">

                        <el-option :label="'待处置'" :value="1" />
                        <el-option :label="'处置中'" :value="9" />
                        <el-option :label="'待确认'" :value="5" />
                        <el-option :label="'督办中'" :value="7" />
                        <el-option :label="'督办完成'" :value="6" />
                    </el-select><br/></li>
                <li><span class="filter-name">上报时间：</span>
                    <el-date-picker v-model="listQuery.createTime" type="datetimerange" :picker-options="pickerOptions2" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"/></li>
                <li style="padding-left:10px;">
                    <el-button style="vertical-align:middle;margin-top:-2px;" round size="mini"
                               type="primary" @click="getList()">查询</el-button>
                </li>
            </ul>

        </div>
        <div class="data-wrapper">
            <template v-if="tableData!=null">
                <el-table ref="multipleTable" :data="tableData"  tooltip-effect="dark" style="width: 100%"
                          @selection-change="handleSelectionChange">
                    <el-table-column type="selection" label="全选" width="55">
                    </el-table-column>
                    <el-table-column type="index" label="序号" :index="indexMethod">
                    </el-table-column>
                    <el-table-column prop="eCode" label="事件编号"  width="180">
                    </el-table-column>
                    <el-table-column prop="eName" label="事件名称"  width="180">
                    </el-table-column>
                    <el-table-column prop="typeName" label="事件类型"  width="180"><!--联表字段-->
                    </el-table-column>
                    <el-table-column prop="createUser" width="150" label="上报人">
                    </el-table-column>
                    <el-table-column prop="riverName" label="所属河道"  width="120"><!--联表字段-->
                    </el-table-column>
                    <el-table-column prop="riverManage" label="责任河长"  width="120">
                    </el-table-column>
                    <el-table-column prop="eSource.name" label="事件来源">
                    </el-table-column>
                    <el-table-column prop="createTime" label="上报时间">
                    </el-table-column>
                    <el-table-column prop="handleState" label="当前状态":formatter="eventFormatState">
                    </el-table-column>
                    <el-table-column label="详情">
                        <template slot-scope="scope">
                            <el-button title="查看" size="small" icon="el-icon-search" type="primary" circle
                                       @click="eventBindDuty(scope.$index, scope.row)"></el-button><!--处置查看-->
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button title="审核" v-if="scope.row.handleState!=1" size="small" icon="el-icon-check" type="primary"
                                       circle style="background-color:#c5ab32;border:1px solid #c5ab32;"></el-button><!--待受理-->
                            <el-button title="督办" v-if="scope.row.handleState==6||scope.row.handleState==7||scope.row.handleState==5"size="small"
                                       icon="el-icon-bell" type="warning" circle></el-button><!--待确认(关闭)，督办中，督办完成-->
                            <el-button title="处置" v-if="scope.row.handleState==1" size="small" icon="el-icon-edit-outline"
                                       type="success" circle style="background-color:#c5ab32;border:1px solid #c5ab32;"></el-button><!--待处置-->
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
        <!-- 分页和导出功能-->
        <el-row :gutter="20" type="flex" justify="space-between" align="center" class="page-wrapper">
            <el-col :span="4">
                <div class="grid-content">
                    <el-button type="primary">批量导出</el-button>
                </div>
            </el-col>
            <el-col :span="20">
                <div class="page-item">
                    <el-pagination background
                                   @size-change="handleSizeChange"
                                   @current-change="handleCurrentChange"
                                   :current-page.sync="listQuery.currentPage"
                                   :page-sizes="pageSizes"
                                   :page-size="listQuery.pageSize"
                                   layout="total, sizes, prev, pager, next, jumper"
                                   :total="dataCount"/>
                </div>
            </el-col>
        </el-row>
        <!--处置查看弹出框-->
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="oneColBindDutyData">
                <el-table-column type="index" label="序号" :index="indexMethod"></el-table-column>
                <el-table-column property="dutyType" label="任务类别" width="150"></el-table-column>
                <el-table-column property="dutyNote" label="任务内容" width="200"></el-table-column>
                <el-table-column property="createTime" label="发布时间"></el-table-column>
                <el-table-column property="createUser" label="发布人"></el-table-column>
                <el-table-column property="userName" label="责任人"></el-table-column>
                <el-table-column property="userPost" label="职务"></el-table-column>
                <el-table-column property="handleState" label="任务状态" :formatter="dutyFormatState" ></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope" >
                        <el-button title="删除" size="small" icon="el-icon-delete" type="danger" circle
                                   v-if="scope.row.handleState==-1"></el-button>
                        <el-button title="修改" size="small" icon="el-icon-edit" type="success" circle
                                   v-if="scope.row.handleState==-1"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="dialogTableVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="dialogTableVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                tableData:null,//所有数据
                loading: false,//载入中显示flag
                currentPage:1,//当前页数
                pagesize:10,//分页数
                listSelect:[],//被选中的对象列表
                searchInput:" ",//搜索框内容
                dataCount: 100,//默认数据总数,总条数
                pageSizes: [5, 10, 20, 30, 40],//选择每页数据量
                listQuery: {//查询条件
                    currentPage: 1,
                    pageSize: 5,
                    typeId:'',  //这些都搜索查询条件，任务查询条件未写
                    eSource:'',
                    riverId:'',
                    riverManage:'',
                    handleState:'',
                    createTime:null,
                },
                // timevalue:"",//搜索条件中的日期
                dataIndex:null,//,还没用上
                formLabelWidth: '100px',//弹出框样式属性
                dialogTableVisible:false,//单行查看弹出框flag
                oneCol:{//单行的选中数据，初始值为当前行数据
                    name:{},//事件名称
                    typeId:{},//事件类型ID
                    createUser:{},//事件创建人
                    handleState:{}//事件状态
                },
                Options:[],//总的下拉菜单
                eSourceOption:[],//事件来源下拉框-字典
                oneColBindDutyData:[],
                pickerOptions2: {//时间下拉菜单功能
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },

            }
        },
        methods:{
            getList() {//请求数据库获取列表
                console.log(this.listQuery);
                this.loading = true;
                this.postRequest('/api/rcs/eventsDeal',this.listQuery).then((res)=>{
                    var data = res.data;
                console.log(data)
                if (data.status == 200) {
                    this.tableData = data.data;
                    this.dataCount = data.count;
                } else {
                    this.$message.error(data.msg);
                    this.tableData = data.data;//无数据
                }
                this.loading = false;
            }).catch(error => {//错误信息
                    this.$message.error(error);

            });
            },
            getOptions(){
                this.getRequest('/api/rcs/eventsOption',this.listQuery).then((res)=>{
                    var data = res.data;
                    if (data.status == 200) {
                        this.Options=data.data;
                    } else {
                        this.$message.error(data.msg);
                    }
                    this.loading = false;
                }).catch(error => {//错误信息
                    this.$message.error(error);
                });
            },

            eventBindDuty(index,row){//处置查看弹出框，显示当前事件绑定的任务
                this.dialogTableVisible=true;
                this.listQuery.eId=row.eId;
                this.loading = true;
                var _listQuery=this.listQuery;
                _listQuery.currentPage=1;//弹窗暂时没有分页功能
                _listQuery.pageSize=100;
                this.postRequest('/api/rcs/eventBindDuty',_listQuery).then((res)=>{
                    var data = res.data.data;
                if (data.status = 200) {
                    this.oneColBindDutyData=data;
                    console.log(this.oneColBindDutyData);
                } else {
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {//错误信息
                    this.$message.error(error);

            });

            },

            eventFormatState: function(row, column) {//事件显示状态
                return row.handleState == 0 ? "已完成" :
                        row.handleState==1?"待处置" :
                            row.handleState==9?"处置中":
                                row.handleState==5?"待确认":
                                    row.handleState==7?"督办中":
                                        "督办完成"//6

            },
            dutyFormatState: function(row, column) {//任务显示状态
                return
                    row.handleState==8?"已拒绝":
                        row.handleState==1?"已接收" :
                            row.handleState==9?"驳回":
                                row.handleState==5?"待确认":
                                    "待接收";
            },
            indexMethod(index) {//序号递增
                // return index+1;
                return (index+1)+(this.listQuery.currentPage-1)*this.listQuery.pageSize;
            },

            handleSizeChange: function (size) {//每页个数改变
                // this.pagesize = size;
                this.listQuery.pageSize = size;
                this.listQuery.currentPage = 1;
                this.getList();
            },
            handleCurrentChange: function(currentPage){//得到当前
                // this.currentPage = currentPage;
                this.listQuery.currentPage = currentPage;
                this.dataIndex=this.listQuery.currentPage*this.listQuery.pageSize;
                this.getList();
            },
            //选中
            handleSelectionChange(val) {
                this.listSelect=val;
            }

        },
        created() {//构造时调用,向数据库请求设备列表
            this.getList();
            this.getDictionary({types:["EVENT_REPORT"]}).then(res => {//获取事件来源下拉
                var data = res.data;
                if (data.status == 200) {
                    this.eSourceOption= data.data["EVENT_REPORT"];
                    console.log(this.eSourceOption);
                } else {
                    this.$message.error(data.msg);
                }
            }).catch(error => {
                this.$message.error(error);
            });
            this.getOptions();
        },
        mounted(){},
        updated(){},
        destroyed(){},
    }
</script>

<style scoped>

</style>